<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all"/>
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/table.css"/>
    <title>日志列表</title>
    <style type="text/css">
        .searcheBottom{margin-bottom: 10px;}
    </style>
</head>
<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <div class="demoTable">
            <div class="layui-inline searcheBottom">
                类名：
                <div class="layui-inline">
                    <input id="classname" class="layui-input" name="classname" autocomplete="off" placeholder="类名"/>
                </div>
            </div>
            <div class="layui-inline searcheBottom">
                日志类型：
                <div class="layui-inline">
                    <select  id="logtype" name="logtype" class="layui-input" lay-filter="select_filter" style="padding: 0px 20px;">
                        <option value="">全部</option>
                        <option value="1">删除</option>
                        <option value="2">新增</option>
                        <option value="3">修改</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline searcheBottom">
                <div class="layui-inline">
                    <label class="layui-form-label">操作时间:</label>
                    <div class="layui-input-inline">
                        <input id="createtime" class="layui-input" name="createtime" placeholder="操作时间">
                    </div>
                </div>
            </div>
            <div class="layui-inline searcheBottom">
                <button class="layui-btn" data-type="reload" id="search" >搜索</button>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="reset">重置</a>
            </div>
        </div>
    </blockquote>
    <span style="font-size: 16px;"><b>日志列表</b></span>
    <table class="layui-hide" id="logTable" lay-filter="tableFilter"></table>
</div>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script>
    layui.use(['jquery','table','laydate','layer','form','util','layedit'],function(){
        var $=layui.jquery,table=layui.table,laydate = layui.laydate,
            layer = layui.layer,form = layui.form,util=layui.util,layedit=layui.layedit;

        //重置
        $("#reset").on("click",function(){
            classname.value = '';
            logtype.value='';
            createtime.value = '';
        })

        //日期选择器
        laydate.render({
            elem: '#createtime',
            type: 'datetime'
        });

        table.render({
            elem:"#logTable",
            url:"/manage/journal/operationlist",
            method:"post",
            cols:[[
                {field:'id', title: 'ID', sort: true,align:'center'},
                {field:'logname', title: '操作名称',align:'center'},
                {field:'classname', title: '类名',align:'center'},
                {field:'methodname', title: '方法名',align:'center'},
                {field:'content', title: '修改内容',align:'center'},
                {field:'logtype', title: '日志类型',align:'center',templet:function (d) {
                    if(d.logtype=='1'){
                        return '<div class="layui-btn layui-bg-orange layui-btn-xs">删除</div>'
                    }else if(d.logtype=='2'){
                        return '<div class="layui-btn layui-bg-green layui-btn-xs">新增</div>'
                    }else if(d.logtype=='3'){
                        return'<div class="layui-btn layui-bg-blue layui-btn-xs">修改</div>';
                    }
                }},
                {field:'operaterNickname', title: '操作人昵称',align:'center'},
                {field:'createtime', title: '操作时间',sort: true,align:'center',
                    templet: function(d){
                        if(d.createtime!=null){
                            return util.toDateString(d.createtime, 'yyyy-MM-dd HH:mm:ss');
                        }else{
                            return "";
                        }
                    }
                }
            ]],
            limits:[10,15,20,25,30],
            limit:10,
            page:true
        });

        //表格重载
        var active = {
            reload: function () {
                var classname = $('#classname');
                var logtype = $('#logtype option:selected');
                var createtime = $('#createtime');
                table.reload('logTable', {
                    where: {
                        classname: classname.val(),
                        logtype:logtype.val(),
                        createtime:createtime.val()
                    }
                });
            }
        };

        //将搜索框的值随请求传到后台
        $('.demoTable #search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".layui-input").keydown(function (e) {
            if(e.keyCode == 13){
                $('#search').click();
            }
        });

    });
</script>

</body>
</html>